<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test My WebSocket</title>
</head>


<body>
Test<br/>
<div class="test1">
    <input type="text" id="sender" placeholder="用户名">
    <input type="text" id="recipient" placeholder="发送给的用户名称">
    <input type="text" id="message" placeholder="消息">
    <button class="font-type" id="btnConnection">连接测试</button>
    <button class="font-type" id="sendMsg">发送消息</button>
    <button class="font-type" id="sendMsgToCid">发送消息给指定人</button>
    <button class="font-type" id="closeWebSocket">关闭连接</button>
</div>
<div id="msg"></div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

    $("#btnConnection").click(function() {
        var sender = $("#sender").val();
        var recipient = $("#recipient").val();
        webSocketConnTest(sender,recipient);
    })

    $("#sendMsg").click(function() {
        //发送者名称
        var sender = $("#sender").val();
        var message = $("#message").val();
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            //请求地址
            url : "http://"+window.location.host+"/socket/push/",
            //数据，json字符串
            data : {
                sender :sender,
                message:message
            },
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    })


    $("#sendMsgToCid").click(function() {
        var sender = $("#sender").val();
        var recipient = $("#recipient").val();
        var message = $("#message").val();
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            //请求地址
            url : "http://"+window.location.host+"/socket/pushToCid/",
            //数据，json字符串
            data : {
                sender: sender,
                recipient: recipient,
                message:message
            },
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    })

    $("#closeWebSocket").click(function() {
        var sender = $("#sender").val();
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            //请求地址
            url : "http://"+window.location.host+"/socket/close/",
            //数据，json字符串
            data : {
                sender: sender,
            },
            //请求成功
            success : function(result) {
                alert(result.msg);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });

    //连接webSocket测试
    function webSocketConnTest(sender,recipient){
        //判断浏览器是否支持WebSocket
        if ("WebSocket" in window){
            //实现化WebSocket对象，指定要连接的服务器地址与端口
            socket = new WebSocket("ws://"+window.location.host+"/websocket/"+sender+"/"+recipient);

        }else{
            console.log("您的浏览器不支持WebSocket");
            //未测试
            //如果是低版本的浏览器，则用SockJS这个对象，对应了后台“sockjs/webSocketServer”这个注册器，
            //它就是用来兼容低版本浏览器的
            ws = new SockJS("http://"+window.location.host+"/webSocket/sockjs");
        }
        //打开事件 连接建立时触发
        socket.onopen = function() {
            socket.send("发送数据");
            console.log("Socket 已打开");
        };
        //获得消息事件 客户端接收服务端数据时触发
        socket.onmessage = function(msg) {
            console.log("客户端接收服务器发来的数据： "+msg.data);
            alert(msg.data)
        };
        //关闭事件 连接关闭时触发
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            console.log("发生了错误");
        }
    }
</script>
</html>